<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'line.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <el-table :data="list" v-bind="tableProps">
      <el-table-column v-for="(item, index) in columns" :key="index" show-overflow-tooltip
        :label="item.title || item.key" :prop="item.key" v-bind="item">
        <template slot-scope="scope">
          <!--##########这里可以根据key自定义列##########-->
          <span>{{ scope.row[item.key] }}</span>
        </template>
      </el-table-column>
      <el-table-column v-show="!tableProps.hideOperations" label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <a href="#" class="text-blue" @click.prevent="editItem(scope.row, scope.$index)"
            v-permission="'line.edit'">编辑</a>
          <span>&nbsp;</span>
          <!-- <a href="#" class="text-green" @click.prevent="targetEdit(scope.row,scope.$index)">产能目标</a>
          <span>&nbsp;</span> -->
          <a href="#" class="text-red" @click.prevent="deleteItem(scope.row, scope.$index)"
            v-permission="'line.delete'">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>
<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'line',
  data: function () {
    return {
      api: this.$api.line,
      apiList: this.$api.line + 'getlistbypage',
      name: '线体',
      columns: [
        { title: '工厂', key: 'plant_name', width: 120 },
        { title: '工段', key: 'section_name', width: 120 },
        { title: '线体代码', key: 'line_code', width: 120 },
        { title: '线体名称', key: 'line_name', width: 180 },
        { title: '线体描述', key: 'line_description' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        { title: '工厂', key: 'plant_id', span: 24, name: 'select', options: [], props: {} },
        { title: '工段', key: 'section_id', span: 24, name: 'select', options: [], props: {} },
        { title: '线体代码', key: 'line_code', span: 24 },
        { title: '线体名称', key: 'line_name', span: 24 },
        { title: '线体描述', key: 'line_description', span: 24 },
        { title: '班制', key: 'shift', span: 24, name: 'select', options: [], props: { multiple: true } },
      ],
      line_id: '',
      shiftOptions: [],
    }
  },
  methods: {},
  created: function () {
    this.getList()
    this.$request(this.$api.plant + 'getlist').then((r) => {
      this.setFieldOptions('plant_id', r.list, 'id', 'plant_name')
    })
    this.$request(this.$api.section + 'getlist').then((r) => {
      this.setFieldOptions('section_id', r.list, 'id', 'section_name')
    })
    this.$request(this.$api.shift + 'getlist').then((r) => {
      this.shiftOptions = r.list
      this.setFieldOptions('shift', r.list, 'id', 'shift_name')
    })
  },
  watch: {},
}
</script>
<style scoped>
</style>
